iT邦幫忙

2021 iThome 鐵人賽

DAY 3
0
Modern Web

後轉前要多久系列 第 3

【後轉前要多久】# Day03 HTML - BODY內的東西

  • 分享至 

  • xImage
  •  

早期網頁大多都只有HTML骨架,
多數都是白底黑字、沒有美美的編排,文字特效blink一閃一閃的,
加上一些表格或表單,就能傳遞所有想要的資訊,就像現在的實體書本一樣,
頂多加給張照片,或者配個黃黃或黑黑的背景底色,

但現在使用者都太挑食,網頁寫的醜就沒人想看了,動不動就想按左上或右上角的叉叉

以前學的時候還不知道,
以為在HTML中,每個tag的意義是一樣的,都只是為了網頁排版用而設計不一樣的外框或者外型,
只知道<h1>就很大的字、數字越往<h6>就越小 (蠻納悶為啥數字越大反而字體越小...我一開始都記不起來)
<p>就是整整齊齊會多佔一點空間的字,<div>就普普通通中規中矩的字。

但徹底了解後,才知道每個標籤其實都有各自的語意,盡量不要亂使用。

有語意的標籤

搜索引擎是個大架構、有規模的爬蟲系統,
會依照這個網頁寫的內容及資訊,抓出網頁寫的標題、內文、文字段落敘述、圖片等等。

舉個較極端的例子,
即使改變樣式讓<h1>的文字大小、字型、顏色都與<div>一模一樣,
呈現出來的畫面雖然一樣,使用者看到的感受度也都相同,
肉眼來看是這樣,但對搜尋引擎來說卻不是這麼回事。

搜索引擎會認為這個網頁最重要的資訊(文章標題)是<h1>
而文字段落描述是<p>,抓到<img>知道這是張圖片,看到<a>知道這是連結等等。
搜索引擎會去分辨這些事情,將搜索到的網站標題關鍵字下去做分類。

HTML <Body>內的東西

為節省版面空間,
往後程式碼的部分都是放在Body內部的東西

<p>段落</p>
<p>段落</p>
<div>DIV</div>
<div>DIV</div>

上方即為以下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>標題</title>
</head>
<body>
    <p>段落</p>
    <p>段落</p>
    <div>DIV</div>
    <div>DIV</div>
</body>
</html>

標題(headers) <h1>~<h6>

數字越小,字體越大。

一個網頁裡面盡量只能有一個<h1>,代表整篇帖子的主題。
如果一篇文章下了兩個大標題,那會是有點詭異的事。

<h1>網頁的大標題</h1>
<h2>網頁的副標題</h2>
<h3>網頁的中標題</h3>
<h4>網頁的小標題</h4>
<h5>網頁的小小標題</h5>
<h6>網頁的最小標題</h6>

文字段落 <p>

  • <p> 段落(paragraph)

預設的話會佔據段落的上下方一些空間

<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Et, mollitia!</p>

連結標籤 <a>

  • <a> 錨點掛勾(anchor)
<a href="https://ithelp.ithome.com.tw/users/20125192/ironman/4909" target="_blank">連結</a>
  • href 連結網址(hypertext reference),可為相對路徑或絕對路徑(其他網站的網址連結)
  • target 沒填時預設為_self以目前頁面開啟連結,而_blank 為另啟新視窗方式點開連結

另外<a>可以製作追蹤id的效果,會跳轉回對應的id元素去,
這也是在網頁中class能重複、id卻不能重複的理由,
如果id重複,瀏覽器可能只會永遠跳到第一個id去。

<h1 id="title">我是標題</h1>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<p>內容內容內容內容內容</p>
<a href="#title">點我回到標題</a>
<h1 id="title">我是標題</h1>

圖片標籤 <img>

  • <img> 圖片(image)
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/Google_logo_%282013-2015%29.svg/1024px-Google_logo_%282013-2015%29.svg.png" alt="Google的Logo">
  • src 圖片連結網址(source),可為相對路徑或絕對路徑(其他網站的圖片網址)
  • alt 圖片的文字敘述(alternate text),圖片失效時會顯示文字,以及讓讀稿機將圖片轉成文字讀出助於盲人理解

列表清單 <ul>、<ol>、<li>

建議有主題相關聯性的東西就用表單來放來,而非多個div

  • <ul> 無順序(unordered list) 前面是一個點
  • <ol> 有順序(ordered list) 有編號
  • <li> 項目實體(list),通常會被<ul><ol>給包住 被OL包住這句話好像怪怪的
<ul>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ul>

<ol>
    <li>項目1</li>
    <li>項目2</li>
    <li>項目3</li>
</ol>

表格 <table>、<tr>、<th>、<td>

  • <table> 表格
  • <tr> 表格列(table row),用以新增表格欄位(直行、往下新增)
  • <th> 表頭列(table headers),用以表示第一列資料的表頭(橫列、往右新增)
  • <td> 表單資料(table data),用以新增資料列(橫列、往右新增)
<table>
    <tr>
        <th>標題1</th>
        <th>標題2</th>
    </tr>
    <tr>
        <td>內容1</td>
        <td>內容2</td>
    </tr>
    <tr>
        <td>內容1</td>
        <td>內容2</td>
    </tr>
</table>

Table表單沒有CSS時真的頗無聊、沒啥意思。

表單 <form> 、 輸入 <input>

前面都是小case,
這邊開始是HTML的大魔王。

表單 <form>

<form action="index.html" method="get">
    <input type="text" name="mail" placeholder="請輸入信箱">
    <input type="text" name="person" placeholder="請輸入名字">
    <input type="submit" value="送出">
</form>
<form>
  • type 種類。常見帶入值有的:
    • text 單行文字框
    • button 按鈕
    • submit 提交表單時的送出按鈕
    • radio 在相同name的選項中只能單選框
    • checkbox 打勾複選框
  • name 送出的參數名稱,名稱通常同id(瀏覽器透過name名稱來記住使用者常填寫的帳號密碼,如chrome就有自動填入帳號密碼功能)
  • value 內容值、預設填入的值。表單提交時是按value傳遞,而不是顯示的字
  • placeholder 佔位符,未填寫輸入時顯示的提示
<input>
  • action 按下送出後,會跳轉到 action 寫的位置進行處理(通常是後端網頁),URL後面會串上?mail=123&person=333
  • method 預設是get GET方法會將參數顯示在網址,純粹做查詢要資料、或者開發時用Debug相對方便。填入post POST方法則不會顯示任何參數在網址列上,相對來說安全一些。
<form action="index.html" method="get">
    <label>性別</label>
    <input type="radio" name="sex" value="male">男生
    <input type="radio" name="sex" value="female">女生

    <label>興趣</label>
    <input type="checkbox" name="hobby" value="movie">電影
    <input type="checkbox" name="hobby" value="music">音樂
    <input type="checkbox" name="hobby" value="comic">漫畫

    <input type="submit" value="送出">
</form>

name相同、使用checkbox多選時,送出後URL會串上?sex=male&hobby=movie&hobby=music
一樣的Key重複地帶上多個值

標籤 <label>

<label> 標籤,通常搭配表單一起使用作為表單的提示字、說明標籤

<form action="index.html" method="get">
    <label for="mail">電子郵件</label>
    <input type="text" name="mail" id="mail" placeholder="請輸入信箱">
</form>
  • for 用途為點擊標籤後,會找相對應的id 來定位、聚焦

下拉選單 <select> 、 選項 <option>

  • select 清單、選單
  • option 選項實體
<form action="index.html">
    <select name="year">
    <option value="1997">1997</option>
    <option value="1998">1998</option>
    <option value="1999">1999</option>
    </select>

    <input type="submit" value="送出">
</form>

送出後,URL會串上?year=1997

多行文字 <textarea>

<form action="index.html" method="get">
    <textarea name="content" cols="30" rows="10"></textarea>
    <input type="submit" value="送出">
</form>
  • cols 顯示寬的字元數
  • rows 顯示高的字元數
    (也可使用CSS來控制欄位寬高)

無語意的標籤

OK,前面講了蠟麼多東西,現在剩下一點點了

區塊標籤 <div> 、 行內標籤 <span>

<div> 本身不具任何意思、沒有語意,單純拿來排版用。
division意思是"分隔、分裂、除法"
區塊元素 會優先佔滿一整塊水平方向的區域,會換行。

<sapn> 本身不具任何意思,和div一樣純粹點綴樣式用。
spans意思是"跨越、跨度"
行內元素 會優先擠在同一塊水平方向的區域,能不換行就不換行。

<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<div>Lorem ipsum dolor sit amet, consectetur adipisicing.</div>
<span>Lorem ipsum dolor sit amet, consectetur adipisicing.</span>
<span>Lorem ipsum dolor sit amet, consectetur.</span>

因為不具有任何語意,這兩者常被拿來當作容器(Container),適合拿來掛CSS。

不成雙成對出現的標籤

不成雙成對的標籤,為了看起來對稱些,
有些人會選擇性的加上結尾封閉標籤< />,但在HTML中有沒有寫是一樣的。

<br>

<br> 換行、斷行(break)
<br /> 也有人這樣寫

<hr>

<hr> 水平線(horizontal rule)
<hr /> 也有人這樣寫

Lorem ipsum dolor sit amet. <br>
Lorem ipsum dolor sit amet. <br>
<hr>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Modi, voluptatibus! <br>

單純講解HTML真的很無聊,
但熟悉過後再回來找純HTML用法也比較快,
擇日搭配上CSS才會有效果上的變化,會更有學習的動力。


上一篇
【後轉前要多久】# Day02 HTML - 基本觀念複習
下一篇
【後轉前要多久】# Day04 HTML - 元素屬性、以及Emmet語法
系列文
後轉前要多久30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言